<template>
  <div class="manage">
    <el-dialog
      :title="operateType === 'add' ? '新增评论' : '更新评论'"
      :visible.sync="isShow"
    >
      <common-form
        :formLabel="opertateFormLabel"
        :form="operateForm"
        :inline="true"
        ref="form"
      >
      </common-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShow = false">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </div>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="addUser" :style="{ height: '40px' }"
        >+新增</el-button
      >
      <common-form
        :formLabel="formLabel"
        :form="searchFrom"
        :inline="true"
        ref="form"
      >
        <el-button type="primary" @click="getList">ID查找</el-button>
      </common-form>
    </div>
    <div class="common-table">
      <!-- 评论数据Table -->
      <el-table :data="tableData" stripe style="width: 100%" height="90%">
        <el-table-column prop="pid" label="Pid"> </el-table-column>
        <el-table-column prop="text" label="内容"> </el-table-column>
        <el-table-column prop="tid" label="帖子id"> </el-table-column>
        <el-table-column prop="uid" label="用户id"> </el-table-column>
        <!-- 自定义列 -->
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              title="删除"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pager">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          @current-change="currentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import CommonForm from "@/components/manager/CommonForm.vue";
import CommonTable from "@/components/manager/CommonTable.vue";
export default {
  name: "tie",
  components: {
    CommonForm,
    CommonTable,
  },
  data() {
    return {
      tableData: [],
      operateType: "add",
      isShow: false,
      opertateFormLabel: [
        {
          model: "pid",
          label: "Pid",
          type: "input",
        },
        {
          model: "text",
          label: "内容",
          type: "input",
        },
        {
          model: "tid",
          label: "帖子id",
          type: "input",
        },
        {
          model: "uid",
          label: "用户id",
          type: "input",
        },
      ],
      operateForm: {
        pid: "",
        text: "",
        tid: "",
        uid: "",
      },
      formLabel: [
        {
          model: "keyword",
          label: "",
          type: "input",
        },
      ],
      searchFrom: {
        keyword: "",
      },
      pageData: {
        page: 1,
        limit: 5,
      },
      total: 0,
    };
  },
  methods: {
    confirm() {
      this.getList();
    },
    addUser() {
      (this.isShow = true), (this.operateType = "add");
      this.operateForm = {
        pid: "",
        text: "",
        tid: "",
        uid: "",
      };
    },
    getData() {},

    getList() {},
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="less" scoped>
.manage {
  height: 100%;

  .manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .common-table {
    height: 90%;
    position: relative;

    .pager {
      position: absolute;
      right: 20px;
      bottom: 0;
    }
  }
}
</style>
